<template>
  <div class="body">
    <div class="user">

      <div class="main">
        <div class="title">
          <img src="../../assets/images/logo.595745bd.png" alt="登录logo">
        </div>

        <div class="title-msg">
        </div>

        <form class="login-form" method="post" novalidate>
          <!--输入框-->
          <div class="input-content">
            <!--autoFocus-->
            <div>
              <span class="iconfont icon-shouji"></span>
              <input type="text" autocomplete="off" placeholder="用户名" v-model="name" name="username" required />
            </div>
            <div style="margin-top: 16px">
              <span class="iconfont icon-mima"></span>
              <input type="password" autocomplete="off" placeholder="登录密码" v-model="passord" name="password" required maxlength="32" />

            </div>
            <div style="margin-top: 16px" class="codeimg">
              <span class="iconfont icon-cangkucelveguanli"></span>
              <input type="text" v-model="user.code" autocomplete="off" placeholder="输入验证码" name="username" required />
              <img :src="`https://likede2-java.itheima.net/api/user-service/user/imageCode/${user.clientToken}`" alt="code" @click="ChangeCode">
            </div>
          </div>

          <!--登入按钮-->
          <div style="text-align: center">
            <button class="enter-btn" @click.prevent="Gologin">登录</button>
          </div>

          <div class="foor">
            <div class="left"><span>忘记密码 ?</span></div>

            <div class="right"><span>注册账户</span></div>
          </div>
        </form>

      </div>

    </div>
    <CanvasView />
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { v4 as uuidv4 } from "uuid";
import { Login } from "@/api/login";
const name = ref("admin");
const passord = ref("admin");
import { ref } from "vue";
import CanvasView from "@/components/CanvasView.vue";
const router = useRouter();
const user = ref({
  clientToken: uuidv4(),
  code: "",
  loginName: "admin",
  loginType: 0,
  password: "admin",
});
const ChangeCode = () => {
  user.value.clientToken = uuidv4();
};

const Gologin = async () => {
  try {
    let res = await Login(user.value);
    console.log(res);
    localStorage.setItem("token", res.token);
    router.push("/home");
  } catch (error) {
    console.log(error);
  }
};
interface lresData {
  msg: string;
  regionId: string;
  repair: boolean;
  roleCode: string;
  success: boolean;
  token: string;
  userId: number;
  userName: string;
}
</script>

<style scoped lang="less">
.body {
  position: relative;
  .codeimg {
    position: relative;
    img {
      display: block;
      position: absolute;
      right: 133px;
      top: 0;
    }
  }
  .user {
    position: absolute;
    z-index: 1;
    left: 50%;
    margin-top: 251px;
    transform: translate(-50%, -50%);
    .main {
      margin: 0 auto;
      padding-left: 25px;
      padding-right: 25px;
      padding-top: 15px;
      border-radius: 20px;

      width: 518px;
      height: 388px;

      background: #ffffff;
      /*以下css用于让登录表单垂直居中在界面,可删除*/
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -175px;
      margin-left: -340px;
    }

    .title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      position: relative;
    }

    .title img {
      display: block;
      height: 96px;
      width: 96px;
      position: absolute;
      top: -56px;
      left: 40%;
    }

    .title-msg {
      width: 100%;
      height: 64px;
      line-height: 64px;
    }

    .title:hover {
      cursor: default;
    }

    .title-msg:hover {
      cursor: default;
    }

    .title-msg span {
      font-size: 12px;
      color: #707472;
    }

    .input-content {
      width: 100%;
      height: 120px;
      margin-left: 83px;
      margin-top: -24px;
      position: relative;
      span {
        position: absolute;
        left: 10px;
        font-size: 25px;
        margin-top: 12px;
        color: #707472;
      }
    }

    .input-content input {
      width: 330px;
      height: 48px;
      border: 1px solid #dad9d6;
      background: #ffffff;
      padding-left: 43px;
      padding-right: 10px;
    }

    .enter-btn {
      width: 373px;
      height: 40px;
      color: #fff;
      background: #0bc5de;
      line-height: 40px;
      text-align: center;
      border: 0px;
      margin-top: 78px;
      border-radius: 10px;
      margin-left: 36px;
    }

    .foor {
      width: 100%;
      height: auto;
      color: #9b9c98;
      font-size: 12px;
      margin-top: 20px;
    }

    .enter-btn:hover {
      cursor: pointer;
      background: #1db5c9;
    }

    .foor div:hover {
      cursor: pointer;
      color: #484847;
      font-weight: 600;
    }

    .left {
      float: left;
    }
    .right {
      float: right;
    }
  }
}
</style>s